<template>
	 <view class="object">
	 	
		 <view class="title">
			  盲盒交友 抽个对象
		 </view>
		 <view class="section">
			 <view class="man">
				 <view>
					 <view></view>
					 <view></view>
				 </view>
				 <view>
					 <view @click="fangru(1)" class="Note">放入一张男生纸条</view>
					 <view @click="get('male')" class="Note">抽取1张男生纸条</view>
				 </view>
			 </view>
			 <view class="male">
				 <view>
						 <view></view>
						 <view></view>
				 </view>
				 <view>
						 <view @click="fangru(0)" class="Note">放入一张女生纸条</view>
						 <view  @click="get('woman')" class="Note">抽取1张女生纸条</view>
				 </view>
			 </view>
		 </view>
		 <!-- 页脚 -->
		 <view class="footer">
			<view @click="action(1)">玩家须知</view>
			 <view @click="xieyi()">用户协议</view>
			<view @click="action(2)">联系客服</view>
			<view @click="action(3)">投诉举报</view>
		 </view>
		 <u-popup height="900" v-model="fangruShow" mode="bottom">
		 			 <view class="popupContent">
		 				 <view  class="close">
		 			 	<u-icon @click="fangruShow=false" name="close"></u-icon>
							<view style="text-align:center;margin-left:200rpx;">放入1张{{sexs[sex]}}的纸条</view>
		 				 </view>
		 				<view class="home">
							<view style="padding:20rpx 0;border-bottom:2rpx solid gray;">
								<view @click="changeText()" :class="[dingwei!=='正在定位' && dingwei!=='不限城市' ? 'dingwei' : 'gray']" ><u-icon  v-if="dingwei!=='正在定位'" size='24' name="map-fill"></u-icon><text>{{dingwei}}</text></view>
								<view class="desc">不限城市没有抽到请取消不限城市</view>
							</view>
							<textarea :maxlength='-1' v-model="chat" placeholder="说点什么吧~" />
							<u-upload @on-uploaded='uploaded' :show-progress="false" ref="uUpload" :max-count='9' width='150' height='150' :auto-upload="false" :action="url"></u-upload>
							<view>
								<view style="padding-top:20rpx;border-top:2rpx solid gray;">
									<view @click="showSelect=true;" style="display:inline-block;">我的{{currentFangShi.label}} <u-icon name='arrow-right'></u-icon> </view>
									<view style="display:inline-block;width:70%;"><u-input v-model="chatFangshi"></u-input> </view>
								</view>
							</view>
						</view>
						<view class="price"><text>0.2元/次</text>首次0.1元</view>
		 				 <u-button @click="comfirm" type='success'>确认放入</u-button>
		 			 </view>
		 			 
		 </u-popup>
		 <u-select v-model="showSelect" @confirm="callback" :list="list"></u-select>
		 <u-popup v-model="show" mode="bottom">
			 <view class="popupContent">
				 <view  class="close">
			 	<u-icon @click="show=false" name="close"></u-icon>
				 </view>
				 <u-parse :html="textContent"></u-parse>
				 <u-button @click="show=false" type='success'>我知道了</u-button>
			 </view>
			 
		 </u-popup>
	 </view>
</template>

<script>
	const amapFile = require('../../../lib/amap-wx.130.js')
	export default{
		
		data(){
			return{
				showSelect:false,
				list:[
					{label:'微信号',value:1},
					{label:'QQ号',value:0},
				],
				currentFangShi:{
					label:'微信号',
					value:1
				},
				sex:0,
				sexs:['女生','男生'],
				Amap:null,
				chatFangshi:'',
				dingwei:'正在定位',
				dingweiCopy:'',
				url:'',
				chat:'',
				show:false,
				fangruShow:false,
				textContent:`
				<p style="margin-top: 0px; margin-bottom: 0px; padding: 0px; border: none; outline: 0px; font-variant-numeric: inherit; font-variant-east-asian: inherit; font-stretch: inherit; font-size: 14px; line-height: inherit; font-family: -apple-system-font, &quot;Helvetica Neue&quot;, Helvetica, sans-serif; vertical-align: baseline; text-size-adjust: none; color: rgba(0, 0, 0, 0.9); white-space: normal; background-color: rgb(255, 255, 255);">
				    <span style="margin: 0px; padding: 0px; border: none; outline: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; font-size: 13px; line-height: inherit; font-family: inherit; vertical-align: baseline;">这是一个盲盒交友游戏，你不知道会抽到谁的纸条，也不知道你的纸条将会被谁抽到。<br style="margin: 0px; padding: 0px;"/></span>
				</p>
				<p style="margin-top: 0px; margin-bottom: 0px; padding: 0px; border: none; outline: 0px; font-variant-numeric: inherit; font-variant-east-asian: inherit; font-stretch: inherit; font-size: 14px; line-height: inherit; font-family: -apple-system-font, &quot;Helvetica Neue&quot;, Helvetica, sans-serif; vertical-align: baseline; text-size-adjust: none; color: rgba(0, 0, 0, 0.9); white-space: normal; background-color: rgb(255, 255, 255);">
				    <span style="margin: 0px; padding: 0px; border: none; outline: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; font-size: 13px; line-height: inherit; font-family: inherit; vertical-align: baseline;">如果您放入纸条，建议您认真填写，并留下真实有效的联系方式，以便喜欢你的人能够联系到你。<br style="margin: 0px; padding: 0px;"/></span>
				</p>
				<p style="margin-top: 0px; margin-bottom: 0px; padding: 0px; border: none; outline: 0px; font-variant-numeric: inherit; font-variant-east-asian: inherit; font-stretch: inherit; font-size: 14px; line-height: inherit; font-family: -apple-system-font, &quot;Helvetica Neue&quot;, Helvetica, sans-serif; vertical-align: baseline; text-size-adjust: none; color: rgba(0, 0, 0, 0.9); white-space: normal; background-color: rgb(255, 255, 255);">
				    <span style="margin: 0px; padding: 0px; border: none; outline: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; font-size: 13px; line-height: inherit; font-family: inherit; vertical-align: baseline;">希望您带着一颗真诚的心来交友，乱填的纸条有可能会作废哦。为了让交友信息更加真实，抽放纸条时需要支付一些费用，以提高参与门槛。<br style="margin: 0px; padding: 0px;"/></span>
				</p>
				<p style="margin-top: 0px; margin-bottom: 0px; padding: 0px; border: none; outline: 0px; font-variant-numeric: inherit; font-variant-east-asian: inherit; font-stretch: inherit; font-size: 14px; line-height: inherit; font-family: -apple-system-font, &quot;Helvetica Neue&quot;, Helvetica, sans-serif; vertical-align: baseline; text-size-adjust: none; color: rgba(0, 0, 0, 0.9); white-space: normal; background-color: rgb(255, 255, 255);">
				    <span style="margin: 0px; padding: 0px; border: none; outline: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; font-size: 11px; line-height: inherit; font-family: inherit; vertical-align: baseline; color: rgb(255, 0, 0);">注意！所有纸条均来自网友，我们无法保证所有纸条内容的真实性，在添加好友时，请一定要仔细甄别，切勿轻易转账以防被骗。</span><span style="margin: 0px; padding: 0px; border: none; outline: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; font-size: 13px; line-height: inherit; font-family: inherit; vertical-align: baseline;"><br style="margin: 0px; padding: 0px;"/></span>
				</p>
				<p style="margin-top: 0px; margin-bottom: 0px; padding: 0px; border: none; outline: 0px; font-variant-numeric: inherit; font-variant-east-asian: inherit; font-stretch: inherit; font-size: 14px; line-height: inherit; font-family: -apple-system-font, &quot;Helvetica Neue&quot;, Helvetica, sans-serif; vertical-align: baseline; text-size-adjust: none; color: rgba(0, 0, 0, 0.9); white-space: normal; background-color: rgb(255, 255, 255);">
				    <span style="margin: 0px; padding: 0px; border: none; outline: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; font-size: 13px; line-height: inherit; font-family: inherit; vertical-align: baseline;">最后，祝您能收获一段美满的姻缘。<span style="margin: 0px; padding: 0px; border: none; outline: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; font-size: 14px; line-height: inherit; font-family: inherit; vertical-align: baseline; text-decoration-line: underline; color: rgb(255, 0, 0);">【</span></span><a href="https://obohe.com/i/2021/10/09/vh4z6q.jpg" target="_self" title="联系客服" style="margin: 0px; padding: 0px; border: none; outline: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; font-size: 13px; line-height: inherit; font-family: inherit; vertical-align: baseline; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(87, 107, 149);"><span style="margin: 0px; padding: 0px; border: none; outline: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; vertical-align: baseline;">点我进群</span></a><span style="margin: 0px; padding: 0px; border: none; outline: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; font-size: 13px; line-height: inherit; font-family: inherit; vertical-align: baseline; text-decoration-line: underline; color: rgb(255, 0, 0);">】</span>
				</p>
				<p style="margin-top: 0px; margin-bottom: 0px; padding: 0px; border: none; outline: 0px; font-variant-numeric: inherit; font-variant-east-asian: inherit; font-stretch: inherit; font-size: 14px; line-height: inherit; font-family: -apple-system-font, &quot;Helvetica Neue&quot;, Helvetica, sans-serif; vertical-align: baseline; text-size-adjust: none; color: rgba(0, 0, 0, 0.9); white-space: normal; background-color: rgb(255, 255, 255); text-align: center;">
				    <span style="margin: 0px; padding: 0px; border: none; outline: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; font-size: 11px; line-height: inherit; font-family: inherit; vertical-align: baseline;"><span style="margin: 0px; padding: 0px; border: none; outline: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; vertical-align: baseline; color: rgb(12, 12, 12);">用户注意</span><span style="margin: 0px; padding: 0px; border: none; outline: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; vertical-align: baseline; color: rgb(255, 0, 0);">：放完纸条和抽取纸条后</span></span>
				</p>
				<p style="margin-top: 0px; margin-bottom: 0px; padding: 0px; border: none; outline: 0px; font-variant-numeric: inherit; font-variant-east-asian: inherit; font-stretch: inherit; font-size: 14px; line-height: inherit; font-family: -apple-system-font, &quot;Helvetica Neue&quot;, Helvetica, sans-serif; vertical-align: baseline; text-size-adjust: none; color: rgba(0, 0, 0, 0.9); white-space: normal; background-color: rgb(255, 255, 255); text-align: center;">
				    <span style="margin: 0px; padding: 0px; border: none; outline: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; font-size: 11px; line-height: inherit; font-family: inherit; vertical-align: baseline;"><span style="margin: 0px; padding: 0px; border: none; outline: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; vertical-align: baseline; color: rgb(255, 0, 0);">需关注下方公众号随时查看纸条状态</span></span>
				</p>
				<p style="margin-top: 0px; margin-bottom: 0px; padding: 0px; border: none; outline: 0px; font-variant-numeric: inherit; font-variant-east-asian: inherit; font-stretch: inherit; font-size: 14px; line-height: inherit; font-family: -apple-system-font, &quot;Helvetica Neue&quot;, Helvetica, sans-serif; vertical-align: baseline; text-size-adjust: none; color: rgba(0, 0, 0, 0.9); white-space: normal; background-color: rgb(255, 255, 255); text-align: center;">
				    <span style="margin: 0px; padding: 0px; border: none; outline: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; font-size: 11px; line-height: inherit; font-family: inherit; vertical-align: baseline; color: rgb(255, 0, 0);"></span>
				</p>
				<p style="margin-top: 0px; margin-bottom: 0px; padding: 0px; border: none; outline: 0px; font-variant-numeric: inherit; font-variant-east-asian: inherit; font-stretch: inherit; font-size: 14px; line-height: inherit; font-family: -apple-system-font, &quot;Helvetica Neue&quot;, Helvetica, sans-serif; vertical-align: baseline; text-size-adjust: none; color: rgba(0, 0, 0, 0.9); white-space: normal; background-color: rgb(255, 255, 255); text-align: center;">
				    <img src="http://manghe1.zjian.ltd/attachment/images/1/2021/10/o51bQJ1LQe15zY0Ao5GDlb5d5O5doZ.jpg" alt="qrcode_for_gh_15a12b6518cb_258.jpg" width="111" height="105" style="margin: 0px; padding: 0px; border: none; outline: 0px; font: inherit; vertical-align: baseline; max-width: 100%; width: 111px; height: 105px;"/>
				</p>
				<p style="margin-top: 0px; margin-bottom: 0px; padding: 0px; border: none; outline: 0px; font-variant-numeric: inherit; font-variant-east-asian: inherit; font-stretch: inherit; font-size: 14px; line-height: inherit; font-family: -apple-system-font, &quot;Helvetica Neue&quot;, Helvetica, sans-serif; vertical-align: baseline; text-size-adjust: none; color: rgba(0, 0, 0, 0.9); white-space: normal; background-color: rgb(255, 255, 255); text-align: center;">
				    <span style="margin: 0px; padding: 0px; border: none; outline: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; font-size: 11px; line-height: inherit; font-family: inherit; vertical-align: baseline; color: rgb(255, 0, 0);">长按识别二维码</span>
				</p>
				<p>
				    <br/>
				</p>
				`
			}
		},
		onLoad() {
			// this.init();
		},
		methods: {
			// init(){
			// 	this.Amap = new AMAP.AMapWX({
			// 		key:'2dffd847cc60468c6c11efe58efe6d62',
					
			// 	})
				
			// },
			//切换
			
			callback(e){
				// console.log(e,'e');
				this.currentFangShi = e[0]
			},
		
			uploaded(){
				const list = this.$refs.uUpload.lists.filter(e=>e.progress==100)
				
			},
			changeText(){
				if(this.dingwei=='不限城市'){
					this.dingwei=this.dingweiCopy;
				}else{
					this.dingwei='不限城市'
				}
			},
			action(type){
				// type:1 玩家须知
				// type:2 联系客服
				// type:3 投诉举报
				
				this.show=true;
			},
			userLocation(){
				return new Promise((resolve,rejected)=>{
					uni.authorize({
					    scope: 'scope.userLocation',
					    success() {
							resolve('ok')
					    },
						fail(e){
							rejected({e,msg:'err'})
						}
					})
				})
			},
			xieyi() {
				uni.navigateTo({
					url:'/pages/other/yonghuxieyi/index'
				})
			},
			getLocation(){
				return new Promise((resolve,rejected)=>{
					uni.getLocation({
						 type: 'wgs84',
						success({longitude,latitude}){
							resolve({longitude,latitude})
						},
						fail(err) {
							rejected({err})
						}
					})
				})
			},
			async getAddress(){
				const that = this;
				
				// 2dffd847cc60468c6c11efe58efe6d62
				//获取位置
				// const res = await this.userLocation()
				// if(res!='ok'){
				// 	uni.showToast({
				// 		title:'获取位置权限失败'
				// 	})
				// }else{
				// 	const loca = await this.getLocation();
				
				// }
				// console.log(this.Amap,'map');
				if(!this.dingweiCopy){
					const A = new amapFile.AMapWX({
					key:'2dffd847cc60468c6c11efe58efe6d62',
					
				})
				A.getRegeo({
					 success: function(data){
					        //成功回调
							// console.log(data,'data');
							that.dingwei =  data[0].regeocodeData.addressComponent.city;
							 that.dingweiCopy =  data[0].regeocodeData.addressComponent.city;
					      },
					      fail: function(info){
					        uni.showToast({
								title:'获取位置权限失败'
					         })
					      }
				})
				}
				
			},
			// 放入一张
			async fangru(type){
				this.sex = type;
				// type//类型是性别
				this.fangruShow = true;
				await this.getAddress();
				
			},
			// 获取一张
			get(type){},
			//确认放入
			comfirm(){
				this.fangruShow = false;
				// 
				// if(!this){}
				this.$refs.uUpload.upload()
			
				
			}
		},
	}
</script>

<style lang="scss" scoped>
	.desc{
		display:inline-block;
		background-color:#F4F4F4;
		color: #999999;	
		margin-left:20rpx;
	}
	.gray{
		background-color:#F4F4F4;
		display:inline-block;
		color: #999999;
	}
	.dingwei{
		color:white;
		display:inline-block;
		background-color:black;
		padding:10rpx;
		border-radius:10rpx;
	}
	.home{
		width:90%;
		border:4rpx solid black;
		min-height:600rpx;
		border-radius:30rpx;
		margin:0 auto;
		padding:20rpx 10rpx;
	}
	.popupContent{
		padding:20rpx;
	}
	.price{
		font-size:32rpx;
		font-weight:bold;
		text-align:center;
		color: #09BB07;
		padding:20rpx 0;
		>text{
			text-decoration:line-through;
			font-size:24rpx;
			color:gray;
		}
	}
	.close{
		display:flex;
		>view{
			// margin-left:100rpx;
		}
		padding:20rpx 0 20rpx 20rpx;
	}
	.footer{
		display:flex;
		align-items:center;
		justify-content:space-around;
		padding:20rpx 0;
	}
	.section{
		display:flex;
		justify-content:space-around;
	}
	.title{
		text-align:center;
		padding:50rpx 0;
	}
	.man,.male{
		
		>view:first-child{
		   padding-top:20rpx;
			background-color:#5076C0;
			width:350rpx;
			height:120rpx;
			border-radius:10rpx;
			border-bottom-left-radius:0;
			border-bottom-right-radius:0;
			display:flex;
			flex-direction:column;
			// justify-content:center;
			align-items:center;
			
			>view:first-child{
				width:300rpx;
				height:30rpx;
				border-radius:30rpx;
				box-shadow:0rpx 0rpx 0rpx 50rpx #5774AF inset;
			}
			>view:last-child{
				width:220rpx;
				height:50rpx;
				margin-top:22rpx;
				
				background-color:#EBE8E8;
			}
		}
		>view:last-child{
			&::before{
				content:"";
				display:table;
			}
			background-color:#5F8EEA;
			width:350rpx;
			height:400rpx;
			.Note{
				
				width:90%;
				background-color: black;
				color:white;
				text-align:center;
				padding:20rpx 0;
				border-radius:10rpx;
				margin:10rpx auto;
			}
		}
	}
	.male{
		>view:first-child{
			background-color:#C34D96;
			>view:first-child{
				box-shadow:0rpx 0rpx 0rpx 50rpx #AB4F88 inset;
			}
			
		}
		>view:last-child{
		
			background-color:#ED5DB7;
		
			
		}
	}
</style>
